<template>
  <el-dialog
    title="导入表"
    :width="width"
    :visible.sync="isVisible"
    @open="getDataSourceList()"
    append-to-body
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <div class="filter-container">
      <el-select v-model="queryParams.datasource"
                 :placeholder="$t('table.gen.generate.datasource')"
                 class="filter-item search-item" @change="search">
        <el-option
          v-for="item in datasourcesName"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
      <el-input v-model="queryParams.tableName" placeholder="表名称" class="filter-item search-item"/>
      <el-input v-model="queryParams.tableComment" placeholder="表描述" class="filter-item search-item"/>
      <el-button class="filter-item" type="primary" @click="search">
        {{ $t('table.search') }}
      </el-button>
      <el-button class="filter-item" type="success" @click="reset">
        {{ $t('table.reset') }}
      </el-button>
    </div>
    <el-table
      ref="table"
      :key="tableKey"
      v-loading="loading"
      :data="list"
      border
      fit
      style="width: 100%;"
      @selection-change="onSelectChange"
    >
      <el-table-column type="selection" align="center" width="40px"/>
      <el-table-column label="表名称" prop="tableName" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.tableName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="表描述" prop="tableComment" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.tableComment}}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" prop="createTime" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" prop="updateTime" :show-overflow-tooltip="true" align="center" min-width="120px">
        <template slot-scope="scope">
          <span>{{ scope.row.updateTime }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="pagination.num" :limit.sync="pagination.size"
                @pagination="search"/>

    <div slot="footer" class="dialog-footer">
      <el-button type="warning" plain :loading="buttonLoading" @click="isVisible = false">
        {{ $t('common.cancel') }}
      </el-button>
      <el-button type="primary" plain :loading="buttonLoading" @click="submitForm">
        {{ $t('common.confirm') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    genTableDbList,
    getDataSource,
    importTable
  } from '@/api/gen/gen'
  import Pagination from '@/components/Pagination'

  export default {
    name: "importTable",
    components: {Pagination},
    props: {
      dialogVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        screenWidth: 0,
        width: this.initWidth(),
        tableKey: 0,
        loading: false,
        list: [],
        total: 0,
        queryParams: {},
        selection: [],
        pagination: {
          size: 10,
          num: 1
        },
        datasourcesName: [],
        buttonLoading: false
      }
    },
    computed: {
      isVisible: {
        get() {
          return this.dialogVisible
        },
        set() {
          this.close()
        }
      }
    },
    mounted() {
      window.onresize = () => {
        return (() => {
          this.width = this.initWidth()

        })()
      }
    },
    methods: {
      getDataSourceList() {
        getDataSource().then(res => {
          if (res.code == 200) {
            this.datasourcesName = res.data
          }
        })
      },
      initWidth() {
        this.screenWidth = document.body.clientWidth
        if (this.screenWidth < 550) {
          return '95%'
        } else if (this.screenWidth < 990) {
          return '760px'
        } else if (this.screenWidth < 1400) {
          return '780px'
        } else {
          return '830px'
        }
      },
      close() {
        this.reset()
        this.$emit('close')
      },
      search() {
        this.fetch({
          ...this.queryParams,
          ...this.sort
        })
      },
      reset() {
        this.queryParams = {}
        this.sort = {}
        this.$refs.table.clearSort()
        this.$refs.table.clearFilter()
        this.search()
      },
      fetch(params = {}) {
        params.pageSize = this.pagination.size
        params.pageNum = this.pagination.num
        if (this.queryParams.timeRange) {
          params.createTimeFrom = this.queryParams.timeRange[0]
          params.createTimeTo = this.queryParams.timeRange[1]
        }
        this.loading = true
        genTableDbList(params).then(res => {
          if (res.code == 200) {
            this.total = res.data.total
            this.list = res.data.rows
          }
        }).finally(final => {
          this.loading = false
        })
      },
      onSelectChange(selection) {
        this.selection = selection
        console.log("选中", this.selection)
      },
      submitForm() {
        if (!this.selection.length) {
          this.$message({
            message: this.$t('tips.noDataSelected'),
            type: 'warning'
          })
          return
        }
        if(!this.queryParams.datasource){
          this.$message({
            message: this.$t('请选择对应的数据库表'),
            type: 'warning'
          })
          return
        }
        let tableNames = this.selection.map(t=>{return t.tableName}).join(",")
        importTable(tableNames,this.queryParams.datasource).then(res=>{
          if(res.code==200){
            this.$message({
              message: "导入成功",
              type: 'success'
            })
            this.reset()
            this.$emit('success')
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog__header {
    position: sticky;
    left: 0;
    top: 0;
    background-color: #fff;
    z-index: 999;
  }

  ::v-deep .el-dialog {
    position: relative;
    max-height: 75% !important;
    overflow: auto;
  }
</style>
